<!-- 引导弹窗 -->
<template>
	<uni-popup ref="popup" type="center" :custom="true" class="guide" maxHeight="100vh" :isRadius="false">
		<div class="guide">
			<div class="container flex flex-pack-justify-end" :style="{ 'backgroundImage': 'url(' + bgImg + ')' }">
				<view class="iconfont iconclose" @click="closePopup"></view>
			</div>
			<div class="task-container flex flex-v flex-align-center">
				<div class="task-item flex flex-pack-justify">
					<div class="flex flex-v flex-pack-justify-center">
						<span class="task-title">获客效率提升50%</span>
						<span class="task-desc">30秒完善资料</span>
					</div>
					<div class="flex flex-align-center">
						<img v-if="taskStatus" class="done-icon" :src="constant.imgUrl + 'design/task-done.png'" mode="widthFix" />
						<div v-else class="btn" @click="jumpToCenter">去完善</div>
					</div>
				</div>

				<div class="task-item flex flex-pack-justify">
					<div class="flex flex-v flex-pack-justify-center">
						<span class="task-title">快速抓取目标客户信息</span>
						<span class="task-desc">分享文章案例</span>
					</div>
					<div class="flex flex-align-center">
						<div class="btn" @click="jumpToArticel">去分享</div>
					</div>
				</div>

				<div class="task-item flex flex-pack-justify">
					<div class="flex flex-v flex-pack-justify-center">
						<span class="task-title">打造高效率的营销团队</span>
						<span class="task-desc">邀请团队成员</span>
					</div>
					<div class="flex flex-align-center">
						<div class="btn" @click="jumpToTeam">去使用</div>
					</div>
				</div>

				<div class="task-item flex flex-pack-justify">
					<div class="flex flex-v flex-pack-justify-center">
						<span class="task-title">打造自己的私域流量</span>
						<span class="task-desc">玩转分享裂变</span>
					</div>
					<div class="flex flex-align-center">
						<div class="btn" @click="jumpToAction">去查看</div>
					</div>
				</div>
			</div>
		</div>
	</uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
// import { setTimeout } from 'timers'
import { isPersonRoleType } from '@/utils/common'
import constant from '@/constant/index'
import moment from 'moment'
export default {
	components: {
		uniPopup
	},
	props: {
		userInfo: {
			require: true
		}
	},
	computed: {
		bgImg() {
			return constant.oemObj.taskBgUrl
		}
	},
	data() {
		return {
			taskStatus: true,
			constant: constant
		}
	},
	mounted() {
		this.$nextTick(() => {
			const showDate = uni.getStorageSync('showGuideDate')
			if (showDate === moment().format('YYYY-MM-DD')) {
				this.closePopup()
			} else {
				this.openPopup()
				uni.setStorageSync('showGuideDate', moment().format('YYYY-MM-DD'))
			}
		})
		this.checkTaskStatus()
	},

	methods: {
		// 用户资料完成状态
		checkTaskStatus() {
			var arr = []
			if (isPersonRoleType(this.userInfo.role_id)) {
				arr = ['address', 'user_picture', 'nick_name', 'working_years', 'good_at_style', 'province_name', 'city_name', 'district_name', 'contact_phone', 'wechat_number', 'wechat_qrcode']
			} else {
				arr = ['address', 'user_picture', 'nick_name', 'nick_name_short', 'working_years', 'business_hours', 'province_name', 'city_name', 'district_name', 'contact_phone', 'wechat_number', 'wechat_qrcode']
			}
			// const userInfoArr = []
			// _.forEach(this.userInfo, function(value, key) {
			//     userInfoArr[key] = value
			// })
			// for (const i in this.userInfo) {
			// 	userInfoArr[i] = this.userInfo[i]
			// }
			arr.map(val => {
				if (!this.userInfo[val]) {
					this.taskStatus = false
				}
			})
		},
		openPopup() {
			this.$refs.popup.open()
		},
		closePopup() {
			this.$refs.popup.close()
		},
		// 资料编辑页
		jumpToCenter() {
			this.closePopup()
			uni.navigateTo({
				url: `/pages/persondata/index?owner_user_id=${this.userInfo.user_id}`
			})
			// const path = this.userInfo.role_id == 1 || this.userInfo.role_id == 2 ? `decompanyedit` : `depersondata`
			// const returnUrl = `${this.$constant.formal}/hkds/#/admin/center/shop/${path}?owner_user_id=${this.userInfo.user_id}`
			// uni.navigateTo({
			// 	url: `/pages/page/webview/index?returnUrl=${returnUrl}`
			// })
			// this.$router.push({
			// 	name: path,
			// 	query: { owner_user_id: this.userInfo.user_id }
			// })
		},
		// 文章列表页
		jumpToArticel() {
			this.closePopup()
			uni.navigateTo({
				url: `/pages/pagesHome/shop/shopArticle?owner_user_id=${this.userInfo.user_id}`
			})

			// const url = `${this.$constant.formal}/hkds/#/`
			// const role_type = this.userInfo.role_id == 1 || this.userInfo.role_id == 2 ? `company` : `person`
			// const params = `?owner_user_id=${this.userInfo.user_id}`
			// const returnUrl = url + role_type + '/article' + params
			// uni.navigateTo({
			// 	url: `/pages/page/webview/index?returnUrl=${returnUrl}`
			// })
			// this.$router.push({
			// 	name: 'ShopArticle',
			// 	query: { owner_user_id: this.userInfo.user_id }
			// })
		},
		// 团队页面
		jumpToTeam() {
			this.closePopup()
			uni.navigateTo({
				url: `/pages/admin/league/leagueTeamList?owner_user_id=${this.userInfo.user_id}`
			})
			// const startUrl = `${this.$constant.formal}/hkds/#`
			// const params = `?owner_user_id=${this.userInfo.user_id}`
			// let endUrl
			// if (isPersonRoleType(this.userInfo.role_id)) {
			// 	endUrl = `/admin/center/shop/deteam`

			// 	// this.$router.push({
			// 	// 	name: 'Deteam',
			// 	// 	query: { owner_user_id: this.userInfo.user_id }
			// 	// })
			// } else {
			// 	endUrl = `/company/team`
			// 	// this.$router.push({
			// 	// 	name: 'Designteam',
			// 	// 	query: { owner_user_id: this.userInfo.user_id }
			// 	// })
			// }
			// const returnUrl = startUrl + endUrl + params
			// uni.navigateTo({
			// 	url: `/pages/page/webview/index?returnUrl=${returnUrl}`
			// })
		},
		// 线索跟踪页
		jumpToAction() {
			this.closePopup()
			uni.navigateTo({
				url: `/pages/getGuest/centerAction?owner_user_id=${this.userInfo.user_id}`
			})
			// const returnUrl = `${this.$constant.formal}/hkds/#/admin/center/action`
			// uni.navigateTo({
			// 	url: `/pages/page/webview/index?returnUrl=${returnUrl}`
			// })
			// this.$router.push({
			// 	name: 'CenterAction'
			// })
		}
	}
}
</script>

<style lang='scss' scoped>
	.guide {
		// background: #ffffff;
		// width: 600px;
		// height: 855px;
		border-radius: 20px;
		overflow: hidden;
		.container {
			// background-image: url($imgUrl+'design/guide-bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-color: #fff;
			width: 100%;
			height: 195px;
			padding-bottom: 20px;
			.iconclose {
				color: #ffffff;
				margin: 30px;
			}
		}
		.task-container {
			background-color: #fff;
			padding-bottom: 50px;
			.task-item {
				padding: 30px 20px;
				width: 500px;
				height: 70px;
				border-radius: 20px;
				box-shadow: #c1c1c1 0px 3px 16px 0px;
				margin-top: 20px;
				.task-title {
					color: #333333;
					font-size: 30px;
					line-height: 43.2px;
				}
				.task-desc {
					color: #999999;
					font-size: 24px;
					line-height: 43.2px;
				}
				.btn {
					width: 150px;
					height: 60px;
					border-radius: 30px;
					background: -webkit-linear-gradient(left, #fb5f4d, #f92f2d);
					background: -o-linear-gradient(right, #fb5f4d, #f92f2d);
					background: -moz-linear-gradient(right, #fb5f4d, #f92f2d);
					background: linear-gradient(to right, #fb5f4d, #f92f2d);
					color: #ffffff;
					font-size: 30px;
					line-height: 60px;
					text-align: center;
				}
				.done-icon {
					width: 104px !important;
					height: 104px !important;
				}
			}
		}
	}
</style>
